<template>
  <div class="container_edit">
    <div class="header">
      <p>新增/修改角色</p>
      <el-button
        class="link"
        type="info"
        @click="back"
      >返回</el-button>
    </div>
    <div class="main">
      <el-form
        :model="role"
        :rules="rules"
        ref="role"
        label-width="120px"
        class=""
      >
        <el-form-item
          label="角色名称"
          prop="roleName"
        >
          <el-input
            v-model="role.roleName"
            placeholder="请输入角色名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="角色描述"
          prop="roleDescribe"
        >
          <el-input
            type="textarea"
            v-model="role.roleDescribe"
            placeholder="请输入角色描述"
            :rows="5"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="角色权限"
          prop="permissionIds"
        >
          <div class="access-list">
            <el-checkbox-group v-model="role.permissionIds">
              <div
                v-for="(item,index) in roleList"
                :key="item.id"
                class="access-item"
              >
                <template>
                  <el-checkbox
                    @change="roleListChange(index,item.id)"
                    :label="item.id"
                    :key="item.id"
                  >{{item.permissionName}}</el-checkbox>
                </template>
              </div>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="handleSave('role')"
          >保存</el-button>
          <el-button
            type="info"
            @click="back"
          >返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
import FileSaver from "file-saver";
export default {
  data() {
    return {
      currentPage: 1,
      role: {
        id: "",
        roleName: "",
        roleDescribe: "",
        permissionIds: []
      },
      loading:false,
      roleList: [],
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        roleDescribe: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        permissionIds: [
          {
            type: "array",
            message: "请选择角色权限",
            required: true,
            trigger: "change"
          }
        ]
      }
    };
  },
  mounted() {
    this.id = this.$router.currentRoute.query.id;
    this.currentPage = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    if (this.id) {
      this.getDetailById();
    } else {
      this.getList();
    }
  },
  methods: {
    roleListChange(index, num) {
      let arr = this.roleList[index];
      if (this.role.permissionIds.includes(num)) {
        arr.childPermissions.map(item => {
          this.role.permissionIds.push(item.id);
        });
      }else{
        arr.childPermissions.map(item => {
          this.role.permissionIds.map((list,index)=>{
            if(list == item.id){
              this.role.permissionIds.splice(index,1)
            }
          })
        });
      }
    },
    back() {
      this.$router.push({
        path: "/roleList",
        query: { currentPage: this.currentPage }
      });
    },
    getDetailById: function() {
      let url = CONSTANT.URL.SYSTEM.GETROLEINFOBYID;
      let param = { roleId: this.id };
      common.requestAjax(url, null, param, res => {
        //console.log(res);
        if (res.status == 200) {
          let data = res.data.bussData;
          this.role.id = data.id;
          this.role.roleName = data.roleName;
          this.role.roleDescribe = data.roleDescribe;
          this.role.permissionIds = data.permissionIds;
          this.getList();
        }
      });
    },
    getList: function() {
      let url = CONSTANT.URL.SYSTEM.GETALLAPPPERMISSION;
      let data = {};
      let param = JSON.stringify(data);
      common.requestAjax(url, null, param, res => {
        let data = res.data.bussData;
        this.roleList = data;
      });
    },
    handleSave: function(formName) {
      this.loading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = CONSTANT.URL.SYSTEM.SAVEAPPROLE;
          common.requestAjax(url, this.role, null, res => {
            this.loading = false;
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "保存成功！"
              });
              this.back();
            } else {
              this.$message({
                type: "warning",
                message: res.msg
              });
            }
          });
        } else {
          this.loading = false;
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
